<template>
  <el-header>
    <el-page-header>
      <template #icon>
        <el-icon @click="appStore.toggle()">
          <Expand v-if="appStore.isCollapse" />
          <Fold v-else />
        </el-icon>
      </template>
      <template #title>{{ appStore.isCollapse ? '开' : '关' }}</template>
      <template #content>
        <div class="flex items-center">
          <el-avatar
            :size="32"
            class="mr-10"
            src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
          />
          <span class="text-large font-600 mr-5"> Title </span>
          <span class="text-sm mr-5" style="color: var(--el-text-color-regular)">
            Sub title
          </span>
          <el-tag>Default</el-tag>
        </div>
      </template>
      <template #extra>
        <div class="flex items-center">
          <el-button>Print</el-button>
          <el-button type="primary" class="ml-5">Edit</el-button>
        </div>
      </template>
    </el-page-header>
  </el-header>
</template>

<script setup>
import { Expand, Fold } from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()
</script>

<style scoped>
.el-header {
  padding: 10px;
}

.flex {
  display: flex;
}
.items-center {
  align-items: center;
}
.mr-5 {
  margin-right: 5px;
}
.mr-10 {
  margin-right: 10px;
}
</style>
